<script setup lang="ts">
import { onMounted, ref } from "vue";
import { throttle } from "lodash";
import type { Banner } from "@/types/homeTypes/homeTypes.ts";

interface Props {
   bannerList: Banner[];
   autoPlay: boolean;
   interval: number;
}

const props = defineProps<Props>();


const currentIndex = ref<number>(0);

let time: any = null;

const handleAutoPlay = () => {
   if (!props.autoPlay) return;
   clearInterval(time);
   time = setInterval(() => {
      currentIndex.value++;
      if (currentIndex.value > props.bannerList.length - 1) {
         currentIndex.value = 0;
      }
   }, props.interval);
};


const handleToggle = throttle(function(index: number) {
   let newIndex = currentIndex.value + index;
   if (newIndex > props.bannerList.length - 1) {
      newIndex = 0;
   }
   if (newIndex < 0) {
      newIndex = props.bannerList.length - 1;
   }
   currentIndex.value = newIndex;
},800);


const handleEnter = () => {
   clearInterval(time);
};

const handleLeave = () => {
   handleAutoPlay();
};

onMounted(() => {
   handleAutoPlay();
});

</script>

<template>
   <div class="carousel" @mouseenter="handleEnter" @mouseleave="handleLeave">
      <ul class="carousel">
         <el-skeleton animated :count="1" :loading="!bannerList.length">
            <template #template>
               <el-skeleton-item variant="image"></el-skeleton-item>
            </template>
            <template #default>
               <li class="carousel-item" v-for="(item,index) in bannerList" :key="item.id" :class="{fade:index===currentIndex}">
                  <img :src="item.imgUrl" alt="">
               </li>
            </template>
         </el-skeleton>
      </ul>
      <a class="carousel-btn prev" @click="handleToggle(-1)"><i class="iconfont icon-angle-left"></i></a>
      <a class="carousel-btn next" @click="handleToggle(1)"><i class="iconfont icon-angle-right"></i></a>
      <div class="carousel-indicator">
         <span v-for="(item,index) in bannerList" :key="item.id" :class="{active:index===currentIndex}" @click="currentIndex=index"></span>
      </div>
   </div>
</template>

<style scoped lang="less">
.carousel {
   width: 100%;
   height: 100%;
   min-width: 300px;
   min-height: 150px;
   position: relative;

   .carousel {
      &-body {
         width: 100%;
         height: 100%;
      }

      &-item {
         width: 100%;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
         opacity: 0;
         transition: opacity 0.5s ease-in-out;

         &.fade {
            opacity: 1;
            z-index: 1;
         }

         img {
            width: 100%;
            height: 100%;
         }
      }

      &-indicator {
         position: absolute;
         left: 0;
         bottom: 20px;
         z-index: 2;
         width: 100%;
         text-align: center;

         span {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            cursor: pointer;

            ~ span {
               margin-left: 12px;
            }

            &.active {
               background: #27BA9B;
            }
         }
      }

      &-btn {
         width: 44px;
         height: 44px;
         background: rgba(0, 0, 0, .2);
         color: #fff;
         border-radius: 50%;
         position: absolute;
         top: 228px;
         z-index: 2;
         text-align: center;
         line-height: 44px;
         opacity: 0;
         transition: all 0.5s;

         &.prev {
            left: 20px;
         }

         &.next {
            right: 20px;
         }
      }
   }

   &:hover {
      .carousel-btn {
         opacity: 1;
      }
   }

   .el-skeleton {
      height: 500px;

      .el-skeleton__item {
         height: 500px;
      }
   }

}
</style>
